<template>
  <div id="QuestionView">
    <a-row :gutter="[24, 24]">
      <!---------------左边题目区域------------------------------>
      <a-col :md="12" :xs="24">
        <!---------------标签页1:题目内容------------------------------>
        <a-tabs default-active-key="1">
          <a-tab-pane key="1">
            <template #title>
              <icon-file />
              题目
            </template>
            <a-card v-if="question" :title="question.title">
              <MdViewer :value="question?.content || ''" />
              <template #extra>
                <a-space>
                  <a-tag
                    v-for="(tag, index) in question?.tags"
                    :key="index"
                    color="blue"
                    >{{ tag }}
                  </a-tag>
                </a-space>
              </template>

              <!---------------判题信息------------------------------>
              <a-descriptions
                title="判题信息"
                layout="inline-horizontal"
                :column="{ xs: 1, md: 3, lg: 4 }"
              >
                <a-descriptions-item label="时间限制">
                  <a-tag>{{ question?.judgeConfig?.timeLimit }}</a-tag>
                </a-descriptions-item>
                <a-descriptions-item label="内存限制">
                  <a-tag>{{ question?.judgeConfig?.memoryLimit }}</a-tag>
                </a-descriptions-item>
                <a-descriptions-item label="堆栈限制">
                  <a-tag>{{ question?.judgeConfig?.stackLimit }}</a-tag>
                </a-descriptions-item>
              </a-descriptions>
            </a-card>
          </a-tab-pane>
          <!---------------标签页2:评论------------------------------>
          <a-tab-pane key="2">
            <template #title>
              <icon-cloud />
              评论
            </template>
            Content of Tab Panel 2
          </a-tab-pane>
          <!---------------标签页3:提交记录------------------------------>
          <a-tab-pane key="3">
            <template #title>
              <icon-history />
              提交记录
            </template>
            {{ question ?? "暂无答案" }}
          </a-tab-pane>
        </a-tabs>
      </a-col>
      <!---------------右边答题区域------------------------------>
      <a-col :md="12" :xs="24">
        <a-form :model="questionSubmit" layout="inline">
          <a-form-item field="name" label="编程语言" style="min-width: 280px">
            <a-select v-model="questionSubmit.language" placeholder="语言">
              <a-option value="java">Java</a-option>
              <a-option value="c">C</a-option>
              <a-option value="cpp">C++</a-option>
              <a-option value="html">html</a-option>
            </a-select>
          </a-form-item>
        </a-form>
        <CodeEditor
          style="min-height: 400px; height: 90vh"
          :value="questionSubmit.code"
          :language="questionSubmit.language"
          :handleChange="codeChange"
        />
        <a-divider size="0" />
        <a-affix :offsetBottom="50">
          <a-button
            type="primary"
            style="font-size: 18px; border-radius: 5px"
            @click="submit"
          >
            <icon-upload />
            提交代码
          </a-button>
        </a-affix>
      </a-col>
    </a-row>
  </div>
</template>

<script setup lang="ts">
import { defineProps, onMounted, ref, withDefaults } from "vue";
import {
  QuestionControllerService,
  QuestionSubmitAddRequest,
  QuestionSubmitControllerService,
  QuestionVO,
} from "../../../api";
import message from "@arco-design/web-vue/es/message";
import CodeEditor from "@/components/CodeEditor.vue";
import MdViewer from "@/components/MdViewer.vue";

const question = ref<QuestionVO>();

interface Props {
  id: number;
}

const props = withDefaults(defineProps<Props>(), {
  id: () => 0,
});

const questionSubmit = ref<QuestionSubmitAddRequest>({
  questionId: props.id,
});
const codeChange = (code: string) => {
  questionSubmit.value.code = code;
};
/**
 * 加载数据
 */
const loadData = async () => {
  const rs = await QuestionControllerService.getQuestionVoByIdUsingGet(
    props.id as any
  );
  if (rs.code === 0) {
    question.value = rs.data;
  } else {
    message.error("获取题目失败" + rs.message);
  }
};

/**
 * 提交代码
 */
const submit = async () => {
  if (!questionSubmit.value.questionId) {
    message.error("请选择题目");
    return;
  }
  if (!questionSubmit.value.code) {
    message.error("请输入代码");
    return;
  }
  if (!questionSubmit.value.language) {
    message.error("请选择编程语言");

    return;
  }
  const rs = await QuestionControllerService.doQuestionSubmitUsingPost(
    questionSubmit.value
  );
  if (rs.code === 0) {
    message.success("提交成功");
  } else {
    message.error("提交失败" + rs.message);
  }
};

/**
 * 页面加载时触发数据加载
 */
onMounted(() => {
  loadData();
});
</script>

<style scoped>
#QuestionView {
  margin: 20px;
}
</style>
